<template>
    <div class="camera">
        <div class="flex camera-headline">
            <div class="flex-left" style="color:#2CA6E0;font-weight:700" @click="setCameraShow">
                <span class="flex-img cursor"><img src="@/assets/img/right.png"
                        style="width: 16px;height: 20px;" />返回</span>
            </div>
            <div class="flex-rgiht">
                <span class="gray">摄像头传感器列表</span>
            </div>
        </div>

        <div class="hnli-popup hp3 flex">
            <div class="flex-s flex-left">

                <el-select v-model="query.query" class=" input-blue" style="width: 200px; margin: 0 10px;" placeholder="基地"
                    size="large">
                    <el-option label="禁用" :value="0" />
                    <el-option label="启用" :value="1" />
                </el-select>
                <el-select v-model="query.query" class=" input-blue" style="width: 200px; margin: 0 10px;"
                    placeholder="电台编号" size="large">
                    <el-option label="禁用" :value="0" />
                    <el-option label="启用" :value="1" />
                </el-select>
                <el-select v-model="query.query" class=" input-blue" style="width: 200px; margin: 0 10px;" placeholder="摄像头"
                    size="large">
                    <el-option label="禁用" :value="0" />
                    <el-option label="启用" :value="1" />
                </el-select>
                <el-button class="camera-button" color="#2BA0C8"><text style="font-size:15px">筛选</text></el-button>

            </div>
            <div class="flex-rgiht flex-s">
                <el-button class="camera-button" color="#0256FF"><text style="font-size:15px">数据大屏</text></el-button>
            </div>
        </div>
    </div>
</template>
    
<script>
export default {

    props: {

    },
    name: 'camera',
    data() {
        return {
            search: '',
            form: {
                id: null,
                name: null,
                version: null,
            },
            query: {
                query: null
            }
        }
    },

    components: {
    },
    methods: {
        setCameraShow() {
            this.$emit('setCameraShow', false);
        }

    }
}
</script>

<style lang="scss">
.camera {
    width: 100%;
    height: calc(100% + 10px);
    background: linear-gradient(to right, #2C334C, #1D2435);
    position: relative;
    bottom: 10px;
    z-index: 999;

    .hnli-popup {
        border-top: 0.5px solid black;
    }

    .camera-button {
        width: 116px;
        margin: 20px 10px;
        border: none;
        outline: none;
        /* 去除聚焦时的边框 */
        border-radius: 40px;
        padding: 0 20px;
        color: white;
        line-height: 40px;
        height: 40px;
        font-size: 20px;
    }
}

.camera-headline {
    width: 100%;
    height: 60px;
    line-height: 50px;
    border-bottom: solid 1px linear-gradient(to left, #272E45, #20273A);
    background: linear-gradient(to right, #313B53, #272F43);
    border-radius: 10px 10px 0px 0px;
    position: relative;
    // bottom: 10px;
    z-index: 100;

    span {
        margin: 0 20px;
    }
}
</style>
    